<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 面对面建群</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="register-container">
    <div class="register-box">
        <h1>注册账号</h1>
        <form id="register-form">
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" required>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" required>
            </div>
            <div class="form-group">
                <label for="nickname">昵称</label>
                <input type="text" id="nickname" required>
            </div>
            <div class="form-group">
                <label for="role">角色</label>
                <select id="role" required>
                    <option value="BROADCASTER">主播</option>
                    <option value="AUDIENCE">观众</option>
                </select>
            </div>
            <button type="submit" id="register-btn">注册</button>
            <p class="login-link">已有账号？<a href="login.html">登录</a></p>
        </form>
    </div>
</div>
<script src="js/auth.js"></script>
<script>
    document.getElementById('register-form').addEventListener('submit', async function(e) {
        e.preventDefault();

        const userData = {
            username: document.getElementById('username').value,
            password: document.getElementById('password').value,
            nickname: document.getElementById('nickname').value,
            role: document.getElementById('role').value,
            avatar: 'default-avatar.png'
        };

        try {
            const response = await fetch(`${API_URL}/auth/register`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(userData)
            });

            if (response.ok) {
                alert('注册成功，请登录');
                window.location.href = 'login.html';
            } else {
                const errorText = await response.text();
                alert(`注册失败: ${errorText}`);
            }
        } catch (error) {
            console.error('Registration error:', error);
            alert('注册失败，请稍后再试');
        }
    });
</script>
</body>
</html>